/**
 * File to place common css & scss variables for the component library
 */

body {
  // Progress Colors
  --ToastItem__progress-color: color-mix(
    in srgb,
    var(--color-fg-base),
    transparent 80%
  );

  // Border Radius
  --border-radius-xs: 0.071rem; //1px
  --border-radius-s: 0.142rem; //2px
  --border-radius-m: 0.285rem; //4px
  --border-radius-l: 0.571rem; //8px
  --border-radius-xl: 1.142rem; //16px

  // Font Weights
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  --font-weight-extra-bold: 700;

  // Input Styles
  --input-padding: var(--sm4);
  --input-line-height: 1.2;

  // Modal
  --modal-z-index: 50;

  // Sizes
  --sm6: 0.1429rem; // 2px
  --sm5: 0.2857rem; // 4px
  --sm4: 0.4286rem; // 6px
  --sm3: 0.5714rem; // 8px
  --sm2: 0.7143rem; // 10px
  --sm1: 0.8571rem; // 12px
  --lg1: 1.25rem; // 16px
  --lg2: 1.4286rem; // 20px
  --lg3: 1.7143rem; // 24px
  --lg4: 2.4rem; // 28px
  --lg5: 3.2rem; // 56px
}
